<template>
    <div class="content">
        <div class="main">
            <div class="main-box">
                <div class="text">车辆分类</div>
                <div id="clfl" class="box"></div>
            </div>
        </div>

    </div>
</template>
<script>
import * as echarts from "echarts";
export default {
    name: 'eachart_demo',
    mounted: function () {
        this.$nextTick(function () {
            this.getPie()
        })
    },
    methods: {
        getPie() {
            // 绘制图表
            var myChart = echarts.init(document.getElementById('clfl'))
            // 指定图表的配置项和数据
            var option = {
                legend: {
                    icon: 'circle',
                    top: '5%',
                    textStyle: {
                        color: '#FFF',
                        fontSize:'13px'
                    },
                    itemWidth: 3,
                    padding: [0, 0, 0, 5],
                    data: ['车型一', '车型二', '车型三', '车型四', '车型五']
                },
                series: [
                    {
                        name: 'Nightingale Chart',
                        startAngle: 0,
                        color: ['rgb(248,69,241)', 'rgb(173,70,243)', 'rgb(80,69,246)', 'rgb(71,119,245)', 'rgb(68,175,240)',
                            'rgb(248,69,241,0)', 'rgb(173,70,243,0)', 'rgb(80,69,246,0)', 'rgb(71,119,245,0)', 'rgba(68,175,240,0)'],
                        type: 'pie',
                        radius: [15, 75],
                        center: ['53%', '20%'],
                        roseType: 'area',
                        itemStyle: {
                            borderRadius: 0,
                            lable: {
                                normal: {
                                    formatter: function (params) {
                                        str = params.data.value + '辆'
                                        return str
                                    },
                                }

                            }
                        },
                        data:
                            [{ value: 600, name: '车型一' },
                            { value: 1100, name: '车型二' },
                            { value: 1200, name: '车型三' },
                            { value: 1300, name: '车型四' },
                            { value: 1400, name: '车型五' },
                            { value: 600, name: '' },
                            { value: 1100, name: '' },
                            { value: 1200, name: '' },
                            { value: 1300, name: '' },
                            { value: 1400, name: '' }
                            ],
                        fontSize: 20,
                    }
                ]


            }

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option)
        }
    }

}
</script>
<style scoped >
.content {
    position: relative;
    box-sizing: border-box;
    background-color: rgba(15, 32, 95, 0.7);
}

.main-box {
    position: absolute;
    height: 138px;
    width: calc(100%-4px);
    background-image:
        url("../assets/picture/bj-1.png"),
        url("../assets/picture/bj-2.png"),
        url("../assets/picture/bj-4.png"),
        url("../assets/picture/bj-3.png");
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-position: top left, top right, bottom left, bottom right;
    z-index: 1;
    top: 1px;
    left: 1px;
    bottom: 1px;
    right: -2px;
}

.main {
    height: 136px;
    width: 100%;
    border: 1px solid #1723b0;
}

.chart {
    width: 100%;
    height: 100%;
    border-top: 1px solid rgb(209, 206, 206);
}

.box {
    position: absolute;
   left: 5px;
    top: 22px;
    width: 280px;
    height: 120px;
}

.text {
    color: rgb(255, 255, 255);
    font-weight: 600;
    font-size: 14px;
    position: absolute;
    left: 7px;
    top: 4px;
}
</style>